<template>
	<app-layout>
		<view class="template-login">
			<view class="login">
				<!-- 顶部背景图片-->
				<view class="login-center">
					<view class="login__bg login__bg--top">
						<image class="bg" src="@/static/bg.jpg" mode="aspectFill"> </image>
					</view>
					<view class="mlogin">
						<image class="login__logo_image" src="@/static/logo.png" mode="aspectFit">
						</image>
						<view class="login__name">用管家</view>
					</view>

				</view>
				<view class="login__wrapper">
					<!-- 输入框内容-->
					<view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
						<!-- <view> 登陆</view> -->
						<view class="logintitle" v-if="iswechat && currentModeIndex==1">
							用管家
						</view>
						<view v-else
							class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
							<view class="login__info__item__input__left-icon">
								<view class="tn-icon-phone"></view>
							</view>
							<view class="login__info__item__input__content">
								<input v-model="username" maxlength="11" placeholder-class="input-placeholder"
									@focus="runbottom" :placeholder="currentModeIndex === 1?'请输入账号':'请输入手机号'" />
							</view>
						</view>
						<!-- 验证码登录 -->
						<block v-if="currentModeIndex === 2">
							<view
								class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
								<view class="login__info__item__input__left-icon">
									<view class="tn-icon-safe"></view>
								</view>
								<view
									class="login__info__item__input__content login__info__item__input__content--verify-code">
									<input v-model="password" placeholder-class="input-placeholder" @focus="runbottom"
										placeholder="请输入验证码" />
								</view>
								<view class="login__info__item__input__right-verify-code" @click="getCode">
									<tn-button :backgroundColor="backgroundColor" fontColor="#FFFFFF" size="sm"
										padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
								</view>
							</view>

						</block>
						<!-- 密码登录 -->
						<block v-if="currentModeIndex === 1">
							<!-- #ifndef MP-WEIXIN-->
							<view
								class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
								<view class="login__info__item__input__left-icon">
									<view class="tn-icon-lock"></view>
								</view>
								<view class="login__info__item__input__content">
									<input v-model="password" :password="!showPassword" @focus="runbottom"
										placeholder-class="input-placeholder" placeholder="请输入登录密码" />
								</view>
								<view class="login__info__item__input__right-icon"
									@click="showPassword = !showPassword">
									<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
								</view>
							</view>
							<!-- 	<view
								class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
								<view class="login__info__item__input__left-icon">
									<view class="tn-icon-safe"></view>
								</view>
								<view
									class="login__info__item__input__content login__info__item__input__content--verify-code">
									<input v-model="captcha" placeholder-class="input-placeholder" @focus="runbottom"
										placeholder="请输入验证码" />
								</view>
								<view class="login__info__item__input__right-verify-code2" @click.stop="getcapcha">
									<image mode="aspectFit" class="capchaimg" :src="capchaimg"></image>
								</view>
							</view> -->
							<!-- #endif-->
						</block>
						<!-- #ifndef MP-WEIXIN  -->
						<view @click="login" class="login__info__item__button tn-bg-blue tn-color-white"
							hover-class="tn-hover" :hover-stay-time="150">登录</view>
						<!-- #endif-->
						<!-- #ifdef MP-WEIXIN -->
						<template v-if="currentModeIndex === 1">
							<button class="login__info__item__button tn-bg-blue tn-color-white" hover-class="tn-hover"
								:hover-stay-time="150" type="default" open-type="getPhoneNumber"
								@getphonenumber="wxlogin"><text class="tn-icon-wechat-fill"></text>微信授权登录</button>
						</template>
						<template v-if="currentModeIndex === 2">
							<view @click="login" class="login__info__item__button tn-bg-blue tn-color-white"
								hover-class="tn-hover" :hover-stay-time="150">登录</view>
						</template>
						<!--  #endif-->
						<view class="checkmodel">
							<!-- <view v-if="currentModeIndex === 1" @click="modeSwitch(2)">验证码登录</view> -->
							<!-- #ifndef MP-WEIXIN -->
							<view v-if="currentModeIndex === 2" @click="modeSwitch(1)">密码登录</view>
							<!-- #endif-->
							<!-- #ifdef MP-WEIXIN -->
							<view v-if="currentModeIndex === 1" @click="login">跳过验证</view>
							<!--  #endif-->
						</view>

						<view class="tn-padding">
							<!-- {{codemsg}} -->
						</view>
						<view :style="'height:'+bottom+'px'"></view>
					</view>
				</view>
			</view>

			<!-- 验证码倒计时 -->
			<tn-verification-code ref="code" uniqueKey="login-demo-4" :seconds="60" @change="codeChange"
				@end="codeEnd"></tn-verification-code>
		</view>
	</app-layout>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	var jWeixin = require('jweixin-module')
	export default {
		name: 'login',
		data() {
			return {
				// 是否显示密码
				showPassword: false,
				bottom: 350,
				// 倒计时提示文字
				tips: '获取验证码',
				username: '',
				password: '',
				backgroundColor: '#2074d4',
				backurl: '/pages/index',
				capchaimg: '',
				captcha: '',
				codemsg: 'codemsg',
				// 当前选中的模式
				currentModeIndex: 1,
				iswechat: !!0,

			}
		},
		onLoad(options) {
			if (options.redirect) this.backurl = options.redirect;
			let t = this;
			// #ifdef H5
			this.getcapcha()
			// #endif
		},
		onShow() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 0
			})
			// #ifdef MP-WEIXIN
			if (this.autologin && this.nodd == false) {
				this.loginbywx()
			}
			// #endif
		},
		computed: {
			...mapState({
				nodd: state => state.nodd,
			})
		},
		methods: {

			// 切换模式
			modeSwitch(index) {
				this.currentModeIndex = index
				this.showPassword = false
				this.password = '';
				// #ifdef H5
				this.getcapcha()
				// #endif
			},
			runbottom() {
				// uni.pageScrollTo({
				// 	scrollTop: this.bottom,
				// 	duration: 0
				// })
			},
			// 获取验证码
			getCode() {
				let t = this;
				if (t.$refs.code.canGetCode) {
					if (!t.username || !t.$t.test.mobile(t.username)) {
						t.$t.message.toast('请输入正确的手机号')
						return false;
					}
					t.$t.message.loading('正在获取验证码')
					t.$request({
						url: t.$api.user.getcode,
						method: 'POST',
						data: {
							mobile: t.username,
						}
					}).then(response => {
						t.$t.message.closeLoading()
						console.log('response', response)
						t.codemsg = JSON.stringify(response);
						if (response.code === 0) {
							setTimeout(() => {
								t.$t.message.toast('验证码已经发送')
								// 通知组件开始计时
								t.backgroundColor = '#767676'
								t.$refs.code.start()
							}, 1000)
						} else {
							t.$t.message.toast(response.msg)
						}
					}).catch(err => {
						t.$t.message.toast(err)
					})
				} else {
					t.$t.message.toast(t.$refs.code.secNum + '秒后再重试')
				}
			},
			// 获取验证码倒计时被修改
			codeChange(event) {
				this.tips = event
			},
			codeEnd() {
				this.backgroundColor = '#2074d4'
			},
			// 微信自动登录
			getwxcode(e) {
				let t = this;
				return new Promise((resolve, reject) => {
					uni.login({
						success(res) {
							resolve(res.code)
						},
						fail(err) {
							reject(err.errMsg)
						}
					})
				})
			},
			loginbywx() {
				let t = this;
				t.$t.message.loading('自动登录中')
				t.getwxcode().then(code => {
					t.$request({
						url: t.$api.user.wxopenid,
						method: 'POST',
						data: {
							code: code,
						}
					}).then(response => {
						t.autologin = false;
						t.$t.message.closeLoading()
						if (response.code === 0) {
							if (response.info.isOK == 0) {
								t.useropenid = response.info.openid
							} else {
								let userinfo = response.info;
								t.$t.vuex('accessToken', userinfo.token)
								t.$t.vuex('userid', userinfo.userid)
								t.$storage.setStorageSync('accessToken', userinfo.token);
								t.$storage.setStorageSync('userid', userinfo.user_id);
								t.$storage.setStorageSync('userinfo', userinfo);
								t.$t.vuex('userinfo', userinfo)
								// return false
								uni.redirectTo({
									url: `/pages/index`
								})
							}
							return false;
						} else {
							t.$t.message.closeLoading()
							t.$t.message.toast(response.msg)
						}
					}).catch(e => {
						t.autologin = false;
						t.$t.message.closeLoading()
						t.$t.message.toast(e)
					});
				})

			},
			// #ifdef MP-WEIXIN
			login() {
				let t = this;
				t.getwxcode().then(code => {
					t.check().then(res => {
						t.$t.message.loading('登录中')
						t.$request({
							url: t.$api.user.wxlogin,
							method: 'POST',
							data: {
								username: t.username,
								password: t.password,
								type: 1,
								openid: t.useropenid
							}
						}).then(response => {
							t.$t.message.closeLoading()
							if (response.code === 0) {
								let userinfo = response.info;

								let {
									UserRights: {
										UserRights
									}
								} = userinfo;

								t.$t.vuex('accessToken', userinfo.token)
								t.$t.vuex('userid', userinfo.userid)
								t.$storage.setStorageSync('accessToken', userinfo.token);
								t.$storage.setStorageSync('userid', userinfo.user_id);
								t.$storage.setStorageSync('userinfo', userinfo);
								uni.redirectTo({
									url: `/pages/index`
								})
								return false;
							} else {
								t.$t.message.closeLoading()
								t.$t.message.toast(response.msg)
							}
						}).catch(e => {
							t.$t.message.closeLoading()
							t.$t.message.toast(e)
						});
					}).catch(err => {
						t.$t.message.toast(err)
					})
				})
			},
			// #endif

			// #ifndef MP-WEIXIN
			login() {
				let t = this;
				t.check().then(res => {
					t.$t.message.loading('登录中')
					t.$request({
						url: t.$api.user.login,
						method: 'POST',
						data: {
							username: t.username,
							password: t.password,
							type: t.currentModeIndex,
							captcha: t.captcha
						}
					}).then(response => {
						t.$t.message.closeLoading()
						if (response.code === 0) {
							let userinfo = response.info;
							t.$t.vuex('accessToken', userinfo.token)
							t.$t.vuex('userid', userinfo.userid)
							t.$storage.setStorageSync('accessToken', userinfo.token);
							t.$storage.setStorageSync('userid', userinfo.user_id);
							t.$storage.setStorageSync('userinfo', userinfo);
							// t.$t.vuex('userinfo', userinfo)
							// t.$user.getInfo().then()
							uni.redirectTo({
								url: '/pages/index'
							})
							return false;
						} else {
							t.getcapcha()
							t.$t.message.closeLoading()
							t.$t.message.toast(response.msg)
						}
					}).catch(e => {
						t.$t.message.closeLoading()
						t.$t.message.toast(e)
					});
				}).catch(err => {
					t.$t.message.toast(err)
				})

			},
			// #endif
			getcapcha() {
				let t = this;
				this.captcha = ''
				this.$t.message.loading('加载中')
				this.$request({
					url: this.$api.user.GetCaptcha,
					method: 'POST',
				}).then(response => {
					t.$t.message.closeLoading()
					// console.log('responseresponse', response.content)
					if (response.code === 0) {
						t.capchaimg = response.info.content;
					} else {
						t.$t.message.closeLoading()
						t.$t.message.toast(response.msg)
					}
				}).catch(e => {
					t.$t.message.closeLoading()
					t.$t.message.toast(e)
				});
			},
			check() {
				let t = this;
				return new Promise((resolve, reject) => {
					if (t.currentModeIndex === 2) {
						if (!t.username || !t.$t.test.mobile(t.username)) {
							return reject('手机号格式不正确')
						}
						if (!t.password) {
							return reject('请输入密码')
						}
					}
					if (t.currentModeIndex === 1) {
						if (!t.username) {
							return reject('请输入账号')
						}
						if (!t.password) {
							return reject('请输入密码')
						}
						// if (!t.captcha) {
						// 	return reject('请输入验证码')
						// }

					}
					return resolve();
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logintitle {
		margin-top: 115rpx;
		margin-bottom: 115rpx;
	}

	.capchaimg {
		width: 280rpx;
		height: 90rpx;
	}

	.login-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.login {
		position: relative;
		height: 100%;
		z-index: 1;
		display: flex;
		flex-direction: column;
		align-items: center;

		.checkmodel {
			display: flex;
			flex-direction: row;
			width: 100%;
			font-size: 28rpx;
			padding-top: 30rpx;
			padding-right: 20rpx;
			justify-content: flex-end;
		}

		/* 背景图片 start */
		&__bg {
			z-index: -1;

			&--top {
				top: 0;
				left: 0;
				right: 0;
				width: 100%;

				.bg {
					width: 750rpx;
					height: 40vh;
					will-change: transform;
				}
			}

			&--bottom {
				bottom: -10rpx;
				left: 0;
				right: 0;
				width: 100%;
				// height: 144px;
				margin-bottom: env(safe-area-inset-bottom);

				image {
					width: 750rpx;
					will-change: transform;
				}
			}
		}

		/* 背景图片 end */

		/* 内容 start */
		&__wrapper {
			width: 100%;
		}

		.mlogin {
			    position: absolute;
			    top: 32vh;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    flex-direction: column;
		}

		&__logo_image {
			width: 100px;
			height: 100px;
			display: flex;
			border-radius: 50%;
			border: 4px solid #ffffffc2;
			background: #2074d4;

			justify-content: center;
			align-items: center;
			color: #fff;
			font-weight: bold;
			letter-spacing: .2rem;
			font-size: 1.2rem;
			padding-bottom: 3px;
		}

		&__name {
			padding-top: 5rpx;
			font-size: 22px;
		}



		/* 切换 end */

		/* 登录注册信息 start */
		&__info {
			margin: 80rpx 50rpx 10rpx 50rpx;
			padding-bottom: 0;
			border-radius: 20rpx;

			&__item {

				&__input {
					margin-top: 59rpx;
					width: 100%;
					height: 77rpx;
					border-bottom: 1rpx solid #E6E6E6;
					// border-radius: 39rpx;

					&__left-icon {
						width: 10%;
						font-size: 44rpx;
						margin-left: 20rpx;
						color: #838383;
					}

					&__content {
						width: 80%;
						padding-left: 10rpx;

						&--verify-code {
							width: 56%;
						}

						&--verify-code2 {
							width: 50%;
						}

						input {
							font-size: 34rpx;
						}
					}

					&__right-icon {
						width: 10%;
						font-size: 44rpx;
						margin-right: 20rpx;
						color: #838383;
					}

					&__right-verify-code {
						width: 34%;
						margin-right: 20rpx;
					}

					&__right-verify-code2 {
						width: 50%;
						margin-right: 20rpx;
					}
				}

				&__button {
					margin-top: 75rpx;
					margin-bottom: 39rpx;
					width: 100%;
					height: 77rpx;
					text-align: center;
					font-size: 34rpx;
					line-height: 77rpx;
					text-indent: 1em;
					border-radius: 10rpx;
				}

				&__tips {
					margin: 30rpx 0;
					color: #AAAAAA;
				}
			}
		}


	}

	/deep/.input-placeholder {
		font-size: 34rpx;
		color: #838383;
	}
</style>